<!--
包含静态组件和动态组件
-->
<template>
    <section class="msite">
        <HeaderTop :title='address.name'>
          <!--header_search插入到left插槽-->
              <router-link class="header_search" slot='left' to='/search'>
                <i class="iconfont icon-sousuo"></i>
              </router-link >
               <router-link class="header_login" slot='right' :to='userInfo._id?"/useinfo":"/login"'>
                <span class="header_login_text" v-if='!userInfo._id'>
                                        登录|注册
                </span>
                <span class="header_login_text" v-else>
                    <i class="iconfont icon-person"></i>
                </span>
              </router-link>
        </HeaderTop>
        <!--首页导航-->
        <nav class="msite_nav">
          <!-- https://www.swiper.com.cn/api/index.html -->
            <div class="swiper-container" v-if='categorys.length>0'>
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for='(categorys,index) in categorysArr' :key='index'>

                        <a href="javascript:" class="link_to_food" v-for='(category,index) in categorys' :key='index'>
                            <div class="food_container">
                                <img :src="baseImageUrl+category.image_url">
                            </div>
                            <span>{{category.title}}</span>
                        </a>

                    </div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
            <img src="./images/msite_back.svg" alt='back' v-else/>
        </nav>
        <!--首页附近商家-->
        <div class="msite_shop_list">
            <div class="shop_header">
                <i class="iconfont icon-xuanxiang"></i>
                <span class="shop_header_title">附近商家</span>
            </div>
            <ShopList/>
        </div>
    </section>
</template>

<script>
    import HeaderTop from '../../components/HeaderTop/HeaderTop'
    import ShopList from '../../components/ShopList/ShopList'
    import Swiper from 'swiper'
    import {mapState} from 'vuex'
    import 'swiper/dist/css/swiper.min.css'
    export default{
        data(){
          return {
              baseImageUrl: 'https://fuss10.elemecdn.com'
          }
        },
        mounted(){

            this.$store.dispatch('getCategorys');

            this.$store.dispatch('getShops');
        },
        components:{
          /*映射成标签*/
            HeaderTop,
            ShopList
        },
        watch:{
            categorys(value){//categorys数组中有数据了，在异步更新界面之前执行
                //界面更新就立即创建swiper对象
                this.$nextTick(()=>{//一旦完成界面立即调用（此条语句要写在数据更新之后）
                   //创建一个swiper实例对象
                    new Swiper('.swiper-container',{
                        loop: true,
                         pagination: {
                             el: '.swiper-pagination',
                         }
                    })
                })
            }
        },
         computed:{
            ...mapState(['address','categorys','userInfo']),

            //根据categorys一维数组生成一个二维数组，小数组中的元素个数最大是8
            categorysArr(){
                const {categorys} = this;
                //准备一个空的二维数组
                const arr = [];
                let minArr = [];
                let num = 0;

                categorys.forEach(c=>{
                    minArr.push(c);
                    if(num==0){
                       arr.push(minArr)
                    }
                    num++
                    if(num==8){
                        num = 0;
                        minArr=[]
                    }

                })


                return arr
            }
        }
    }
</script>

<style lang='stylus' rel='stylesheet/stylus'>
        @import '../../common/stylus/mixins.styl'
        .msite
          width 100%

          //.msite_head 统一用slot 中间文本用props
          .msite_nav//导航
            bottom-border-1px(#e4e4e4)
            margin-top 45px
            height 200px
            background #fff
            .swiper-container
              width 100%
              height 100%
              .swiper-wrapper
                width 100%
                height 100%
                .swiper-slide
                  display flex
                  justify-content center
                  align-items flex-start
                  flex-wrap wrap
                  .link_to_food
                    width 25%
                    .food_container
                      display block
                      width 100%
                      text-align center
                      padding-bottom 10px
                      font-size 0
                      img
                        display inline-block
                        width 50px
                        height 50px
                    span
                      display block
                      width 100%
                      text-align center
                      font-size 13px
                      color #666
              .swiper-pagination
                >span.swiper-pagination-bullet-active
                  background #02a774
          .msite_shop_list//商家列表
            top-border-1px(#e4e4e4)
            margin-top 10px
            background #fff
            .shop_header
              padding 10px 10px 0
              .shop_icon
                margin-left 5px
                color #999
              .shop_header_title
                color #999
                font-size 14px
                line-height 20px

</style>
